<template>
  <div class="details">
    <!-- 攻略详情部分 开始 -->
    <div class="strategy_detail">
      <!-- 文章详情页 开始 -->
      <div class="post_detail" v-if="postDetail.length > 0">
        <postDetails :detailData="postDetail" :total="total" />
      </div>
      <!-- 文章详情页 结束 -->

      <!-- 文章评论部分 开始 把当前页、显示页数传给评论组件-->
      <postComment
        @getTotal="setTotal"
        @getPages="setPages"
        :currentPage="currentPage"
        :pageSize="pageSize"
      />
      <!-- 文章评论部分 结束 -->

      <!-- 文章分页部分 开始 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
      <!-- 文章分页部分 结束 -->
    </div>
    <!-- 攻略详情部分 结束 -->

    <!-- 相关攻略 开始 -->
    <div class="correlation_strategy">
      <postStrategy/>
    </div>
    <!-- 相关攻略 结束 -->
  </div>
</template>

<script>
// 详情组件
import postDetails from "../../components/post/details/postDetails";
// 评论组件
import postComment from "../../components/post/details/postComment";
// 相关攻略组件
import postStrategy from "../../components/post/details/postStrategy";
export default {
  components: {
    postDetails,
    postComment,
    postStrategy,
  },
  data() {
    return {
      currentPage: 1,
      pageSize: 5,
      postDetail: [], // 文章详情数据
      total: 50,
    };
  },
  watch: {
    $route(val) {
      console.log("监听文章详情路由变化，发送请求渲染文章攻略");
      this.$axios({
        url: "/posts",
        params: this.$route.query,
      }).then((res) => {
        const { data } = res.data;
        this.postDetail = data;
        console.log(this.postDetail);
      });
    },
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      // console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      // console.log(`当前页: ${val}`);
    },
    // 子组件传过来的分页总数
    setTotal(val) {
      this.total = val;
    },
    setPages(val) {
      this.currentPage = val;
    },
   
  },
  created() {
    // console.log(this.$route.query);
    this.$axios({
      url: "/posts",
      params: this.$route.query,
    }).then((res) => {
      const { data } = res.data;
      this.postDetail = data;
      // console.log(this.postDetail);
    });
  },
};
</script>

<style lang="less" scoped>
.details {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  padding-top: 15px;
  justify-content: space-between;
  .strategy_detail {
    width: 700px;
  }
  .correlation_strategy {
    width: 280px;
    margin-bottom: 100px;
  }
}
/deep/ .el-pagination {
  margin-bottom: 15px;
}
</style>